(function () {
    $.fn.extend({
        magnifier() {
            class magn {
                constructor(ele) {
                    this.el = ele; //大盒子
                    this.middleImg = this.el.find("#middleImg")
                    this.middleArea = this.el.find("#middleArea")
                    this.bigArea = this.el.find("#bigArea")
                    this.bigImg = this.el.find("#bigImg")
                    // console.log(this.el,this.middleImg,this.middleArea, this.bigArea,this.bigImg);
                    this.init()
                    this.mouseEvent()
                }
                init() {
                    $(this.middleArea).css("width", $(this.bigArea).width() / $(this.bigImg).width() * $(this.middleImg).width())
                    $(this.middleArea).css("height", $(this.bigArea).height() / $(this.bigImg).height() * $(this.middleImg).height())
                }

                mouseEvent() {
                    $(this.middleImg).hover(() => {
                        this.middleArea.show();
                        this.bigArea.show();
                        $(document).mousemove((e) => {
                            var mX = e.pageX - $(this.middleImg).offset().left - $(this.middleArea).width() / 2;
                            var mY = e.pageY - $(this.middleImg).offset().top - $(this.middleArea).height() / 2;
                            if (mX <= 0) {
                                mX = 0
                            }
                            if (mY <= 0) {
                                mY = 0
                            }

                            if (mX >= $(this.middleImg).width() - $(this.middleArea).width()) {
                                mX = $(this.middleImg).width() - $(this.middleArea).width()
                            }
                            if (mY >= $(this.middleImg).height() - $(this.middleArea).height()) {
                                mY = $(this.middleImg).height() - $(this.middleArea).height()
                            }
                            $(this.middleArea).css({
                                left: mX,
                                top: mY
                            })
                            let scale = $(this.bigImg).width() / $(this.middleImg).width();
                            $(this.bigImg).css("left", -scale * mX);
                            $(this.bigImg).css("top", -scale * mY);
                        })
                    }, () => {
                        this.middleArea.hide();
                        this.bigArea.hide();
                    })
                }
            }

            new magn(this)
        },
    })
})()
$(function () {
    $("#box").magnifier(); //放大镜
})